<template>
    <div>
        <div class="container1">
            <div class="common-title-flex">
                <div class="common-title-div"></div>
                <div class="common-title-text">劳动维权微服务查询条件</div>
            </div>
            <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="80px" style="margin-bottom:-10px;margin-top:10px;">
                    <el-form-item label="咨询问题">
                        <el-input v-model="searchObj.content" placeholder="请输入咨询问题" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="咨询人">
                       <el-input v-model="searchObj.name" placeholder="请输入咨询人" clearable ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="咨询时间">
                     <el-date-picker
                        v-model="createTime"
                        unlink-panels
                        type="daterange"
                        value-format="yyyyMMdd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item> -->
                    <el-form-item style="margin-left:2rem;">
                        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
                        <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
            </el-form>
        </div>
        <div class="container" style="margin-top:1rem;">
            <div class="common-list-class">
                <div style="display:flex;">
                    <div class="common-title-div"></div>
                    <div class="common-title-text">劳动维权微服务查询列表</div>
                </div>
                <div style="display:flex;">
                    <!-- <el-upload
                    class="upload-file"
                    :headers="uploadHeader"
                    :before-upload="beforeUpload"
                    :action="uploadUrl"
                    :on-success="uploadSucess"
                    :on-error="uploadError"
                    :on-progress="uploadProgress"
                    :show-file-list="false">
                        <el-button type="primary" icon="el-icon-download">批量导入</el-button>
                    </el-upload>
                    <el-button type="primary" size="mini" style="height:32px;margin-left:10px;" @click="allExportClick" icon="el-icon-position">下载模版</el-button> -->
                    <!-- <el-button type="primary" style="height:32px;" icon="el-icon-circle-plus-outline" @click="addPolice">添加</el-button> -->
                </div>
            </div>
            <!-- 查询列表 -->
            <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
                 <el-table-column prop="content" label="咨询问题"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="componentName" label="企业名称" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="name" label="咨询人" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="咨询时间" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="phone" label="联系方式" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
                        <el-button type="success" size="mini" icon="el-icon-menu" @click="progressClick(scope.row)">查看流程</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="end">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
            </el-row>
        </div>
        <!-- 流程图展示 -->
        <el-dialog title="流程图展示" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="progressFlag" width="40%" :before-close="progressClose" center>
            <div slot="title" class="header-title">
                <div class="header-title-div"></div>
                <div class="header-title-text">流程图展示</div>
            </div>
            <div>
                <el-timeline>
                    <el-timeline-item v-for="(item,index) in progressList" :key="index" icon="el-icon-success" type="primary" size="large"  :timestamp="item.operateTime" placement="top">
                        <el-card class="el_card_class">
                            <h4>{{item.operateUser}}</h4>
                            <div style="font-size:12px;">{{item.rebackContent}}</div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="progressClose">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 反馈-->
        <el-dialog title="反馈内容" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="50%" :before-close="handleClose" center>
            <el-form ref="inputObj" :model="inputObj" label-width="120px" :rules="rules">
                    <el-form-item label="反馈内容" prop="remark">
                        <el-input v-model="inputObj.remark" type="textarea" placeholder="请输入反馈内容" maxlength="300" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit clearable ></el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 警员详情 -->
        <el-dialog title="详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="40%" :before-close="detailsClose" center>
            <div slot="title" class="header-title">
                <div class="header-title-div"></div>
                <div class="header-title-text">详情</div>
            </div>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">企业名称</el-col>
                <el-col :span="15" class="grey-class" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{detailsObj.labourName}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">咨询人</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.name}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">咨询人手机号</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.phone}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">咨询时间</el-col>
                <el-col :span="15" class="grey-class">{{detailsObj.createTime}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">咨询问题</el-col>
                <el-col :span="15" class="grey-class" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{detailsObj.content}}</el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailsClose">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import mixin from '@/mixin/mixin.js'; 
    export default {
        name: 'businessManage',
        mixins: [mixin],
        data(){
            return {
                createTime:[],
                progressFlag:false,
                uploadHeader:{},
                progressList:[{
                    time:'2020-12-20',
                    operate:'企业代表',
                    progressContent:'进行了什么操作',
                },{
                    time:'2020-12-21',
                    operate:'企业负责人',
                    progressContent:'进行了什么操作',
                },{
                    time:'2020-12-22',
                    operate:'劳务公司',
                    progressContent:'进行了什么操作',
                },{
                    time:'2020-12-23',
                    operate:'劳务代表',
                    progressContent:'进行了什么操作',
                },],
                uploadUrl:'https://jsonplaceholder.typicode.com/posts/',
                rules:{
                    remark: [
                        { required: true, message: '请输入反馈内容', trigger: 'blur' }
                    ]
                },
                detailsObj:{
                    companyName: '江苏省南京市有限公司',
                    industyType: 'IT行业',
                    relationMan: '张三',
                    positionPost:'负责人',
                    relationPhone:'139282930303',
                    companyStation:'南京市新港区29号',
                    companyPhone:'025-12321321321'
                },
                inputObj:{
                    companyName:'',
                    industyType:'',
                    relationMan:'',
                    positionPost:'',
                    relationPhone:'',
                    companyStation:'',
                    companyPhone:''
                },
                detailsFlag:false,
                isEditTitle:'',
                newaddFlag:false,
                pageSizes:[10, 15, 50, 100],
                pagesize:10,
                total:10,
                currentPage:1,
                tableData: [],
                searchObj:{},
            }
        },
        created(){
            this.query();
        },
        methods: {
            tableHeaderColor({row,column,rowIndex,columnIndex}){
                return 'background-color:#f5f5f5;color:#626262;'
            },
            rowStyle({ row, rowIndex}){
                let style1={};
                let style2={};
                if(rowIndex%2 == 0){
                    style1.background = '#ffffff';
                    return style1
                }else{
                    style2.background = '#f5f5f5';
                    return style2
                }
            },
            allExportClick(){

            },
            query() {
              let params = {
                  name:this.searchObj.name,
                  content:this.searchObj.content,
                  pageNumber:this.currentPage,
                  pageSize:this.pagesize
              }
              this.showLoading();
              this.$axios({
                    method: 'post',
                    url: `/labourMicro/queryLabourMicro`,
                    headers:{
                        Authorization:this.requestToken 
                    },
                    data: params,
                    // params: params
                }).then(res => {
                    this.hideLoading();
                    console.log('res---->:',res);
                    if(res.data.code == '20000'){
                        this.tableData = res.data.data.list;
                        this.pagesize = res.data.data.pageSize;
                        this.total = res.data.data.total;
                    }else{
                        this.$message({
                            message:res.data.message,
                            type:'error'
                        })
                    }
                }).catch(err => {
                    this.hideLoading();
                    this.$message({
                        message:err,
                        type:'error'
                    })
                })
            },
            beforeUpload(file){
                this.showLoading('导入中')
            },
            uploadProgress(event, file, fileList){
                this.videoUploadPercent = file.percentage.toFixed(0)+"%";
                console.log('event--------',event)
                console.log('file--------',file)
                console.log('fileList--------',fileList)
            },
            uploadSucess(response){
                this.$message({
                    message:'导入成功！',
                    type:'success'
                })
                this.hideLoading();
                console.log('response------',response)
            },
            uploadError(error){
                 this.$message({
                    message:'导入失败！',
                    type:'error'
                })
                this.hideLoading();
                console.log('error-----',error)
            },
            // 新建确认和修改确认
            submit(){
            },
            // 取消点击
            cancel(){
                this.newaddFlag = false;
                this.$refs["inputObj"].resetFields();
                this.inputObj = {};
            },
            // 取消点击
            handleClose(){
                this.cancel();
            },
            // 点击分页当前页多少数据
            handleSizeChange(val){
                this.pagesize = val;
                this.query();
            },
            // 点击分页页数
            handleCurrentChange(val){
                this.currentPage = val;
                this.query();
            },
            //  重置
            reset(){
                this.searchObj = {};
                this.query();
            },
            progressClose(){
                this.progressFlag = false;
            },
            progressClick(row){
                this.showLoading();
                this.$axios({
                        method: 'get',
                        url: `/labourMicro/queryMicroInfoByProcessCode/${row.labourProcessCode}`,
                        headers:{
                            Authorization:this.requestToken 
                        },
                    }).then(res => {
                        this.hideLoading();
                        if(res.data.code == '20000'){
                            this.progressFlag = true;
                            this.progressList = res.data.data;
                        }else{
                            this.$message({
                                message:res.data.message,
                                type:'error'
                            })
                        }
                    }).catch(err => {
                        this.hideLoading();
                        this.$message({
                            message:err,
                            type:'error'
                        })
                    })
            },
            // 详情
            detailsClick(row){
                this.showLoading();
                this.$axios({
                        method: 'get',
                        url: `/labourMicro/queryMicroInfoById/${row.id}`,
                        headers:{
                            Authorization:this.requestToken 
                        },
                    }).then(res => {
                        this.hideLoading();
                        if(res.data.code == '20000'){
                            this.detailsFlag = true;
                            this.detailsObj = res.data.data;
                        }else{
                            this.$message({
                                message:res.data.message,
                                type:'error'
                            })
                        }
                    }).catch(err => {
                        this.hideLoading();
                        this.$message({
                            message:err,
                            type:'error'
                        })
                    })
            },
            // 详情关闭
            detailsClose(){
                this.detailsFlag = false;
            },
            // 修改
            editClick(){
                this.newaddFlag = true;
            }
        }
    }
</script>
<style scoped>
  .common-title-flex{
      display:flex;
  }
  .common-title-div{
      width:3px;
      height:16px;
      background-color:#368af7;
      margin-top:2px;
  }
  .common-title-text{
      margin-left:4px;
      font-size: 14px;
  }
  .common-list-class{
      display:flex;
      justify-content:space-between;
      margin-top:-10px;
  }
  .upload-file >>> .el-upload--text{
      border:none;
      width: 100px;
      height: 36px;
  }
  .el_card_class >>> .el-card__body{
      padding: 10px !important;
  }
</style>>